通过实战篇：导航预加载可知，在一个 Service Worker 尚未启动的页面中，由于浏览器会等到 Service Worker 启动后才发起导航请求，且 Service Worker 启动可能会存在不同程度的延迟，该延迟将直接导致导航请求的延迟，进而增加了页面的整体渲染时间。为解决该问题，我们可以通过导航预加载机制让 Service Worker 的启动与导航请求并行执行，从而避免因 Service Worker 启动延迟而导致的页面渲染缓慢问题。由于我们已对相关底层 API 的使用进行了详细说明，故本章不再重述，而是直接讨论 Workbox 下导航预加载的使用。

# 基本使用

首先我们需要调用以下方法来启用导航预加载功能：

workbox.navigationPreload.enable();

然后我们可通过 workbox.routing.registerNavigationRoute 方法注册导航请求路由：

workbox.routing.registerNavigationRoute(
  workbox.precaching.getCacheKeyForURL('/single-page-app.html')
);

上述代码的效果是：当用户访问站点时，将使用预缓存资源 /single-page-app.html 来响应所有的导航请求，由于方法 workbox.routing.registerNavigationRoute 默认使用预缓存资源进行响应，如果想要自定义响应缓存的来源，可通过以下方式实现：

workbox.routing.registerNavigationRoute(
  'custom-cache-key',
  {
    cacheName: 'custom-cache-name'
  }
);

有时我们可能只想要 /single-page-app.html 来响应部分导航请求，此时可通过设置 whitelist 或 blacklist 属性来实现，比如：

workbox.routing.registerNavigationRoute(
  workbox.precaching.getCacheKeyForURL('/single-page-app.html'),
  {
    whitelist: [
      new RegExp('/blog/')
    ],
    blacklist: [
      new RegExp('/blog/restricted/')
    ]
  }
);

通过配置，只有在满足导航请求路径以 /blog/ 开头且不以 /blog/restricted/ 开头的情况下，才会使用缓存 /single-page-app.html 来响应该请求。

注：属性 whitelist 及 blacklist 的值为正则表达式数组。